<template>
    <h2> 用户理财列表</h2>
    理财编号
    <input type="text" v-model="state.fid" />
    理财名称
    <input type="text" v-model="state.fname" />
    理财收益
    <input type="text" v-model="state.minfyear" /> -
    <input type="text" v-model="state.maxfyear" />
    <input type="button" value="查询" @click="show" class="btn btn-primary" />
    <input type="button" value="批量删除" class="btn btn-danger" @click="pishan" />
    <table class="table table-bordered">
      <tr>
        <td><input type="checkbox" v-model="all" @click="checkall"></td>
        <td>理财编号</td>
        <td>理财名称</td>
        <td>年收益</td>
        <td>月收益</td>
        <td>最低金额</td>
        <td>理财人数</td>
        <td>风险等级</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in list">
        <td><input type="checkbox" v-model="item.checked" @click="checked(item)" ></td>
        <td>{{item.F_Id}}</td>
        <td>{{item.F_Name}}</td>
        <td>{{item.F_Year}}</td>
        <td>{{(item.F_Year/12*100).toFixed(2)}}%</td>
        <td>{{item.F_Money}}</td>
        <td>{{item.F_Num}}</td>
        <td>{{item.F_level==0?'低风险':item.F_Level==1?'中风险':'高风险'}}</td>
        <td><input type="button" value="购买" class="btn btn-danger" @click="buy(item.F_Id)" />
           </td>
      </tr>
    </table>
    <input type="button" value="首页" @click="page('a')" />
    <input type="button" value="上一页" @click="page('c')" />
    <input type="button" value="下一页" @click="page('d')" />
    <input type="button" value="尾页" @click="page('b')" />
  
    <select v-model="state.pageSize" @change="setpage" >
      <option :value="item" v-for="item in arr" >每页{{ item }}条</option>
    </select>
  
    <input type="text" size="2" v-model="tiao" />
    <input type="button" value="跳转"  @click="page('e')" />
    </template>
    
    <script setup lang="ts">
  import {reactive,ref,toRefs,onMounted} from 'vue'
  import { useRouter,useRoute } from 'vue-router';
  import axios from 'axios';

  const router=useRouter();
  const route=useRoute();
  let data:any=reactive({
      state:{
        fid:'',
        fname:'',
        pageIndex:1,
        pageSize:2,
        minfyear:'',
        maxfyear:'',
      },
      arr:[2,3,4,5],
      tiao:'',
      list:[],
      ListCount:'',
      PageCount:'',
      all:'',//控制全选按钮选中与不选中的
      ids:[],//用来存储所有的id
  })
  let{state,list,ListCount,PageCount,arr,tiao,all,ids} =toRefs(data);
  //全选
  const checkall=()=>{
      //all的值为true 那下面的每一个复选框都为true
      all.value=!all.value;
      list.value.forEach((item:any)=>{
        item.checked=all.value;
      })
      if(all.value==true)
      {
        list.value.forEach((item:any)=>{
        ids.value.push(item.F_Id);
      })
      }
      else{
        ids.value=[];
      }
  }
  //反选
  const checked=(obj:any)=>{
    obj.checked=!obj.checked;//取反
    //every 返回值为布尔类型 如果有一件不满足就是false 都满足才是true
    let bool=list.value.every((item:any)=>{
      return item.checked==true    
      })
      all.value=bool;
      //如果选中push
      if(obj.checked==true)
      {
        ids.value.push(obj.F_Id);
        console.log(ids.value);
      }
      //如果没有被选中移除id
      else{
     let i= ids.value.find((item:any)=>{
          return item==obj.F_Id
        })
        ids.value.splice(i,1);
      }
  }
  //批量删除
  const pishan=()=>{
    //1 判断数组中是否有值
    if(ids.value.length==0)
    {
      alert('至少选择一项');
      return;
    }
    //2 发送请求
    let idstr=ids.value.toString();
    console.log(idstr);
    axios({
      url:"/api/Finance/GetFinanceDel",
      method:'get',
      params:{
        id:idstr
      }
    })
    .then(res=>{
      console.log(res);
      if(res.data.data>0)
      {
        alert('删除成功');
        show();
      }
      else{
        alert('删除失败');
      }
    })
    .catch(err=>{
      console.log(err);
    })
  }
  onMounted(()=>{
    show();
  })
  const setpage=()=>{
    state.value.pageIndex=1;
    state.value.pageSize=state.value.pageSize;
    ;
    show();
  }
  const show=()=>{
    axios({
      url:"/api/Finance/GetFinanceList",
      method:"get",
      params:state.value
    })
    .then(res=>{
      console.log(res);
    
        res.data.list.forEach((item:any)=>{
        item.checked=true;
      })
  
      list.value=res.data.list;
      ListCount.value=res.data.ListCount;
      PageCount.value=res.data.PageCount;
      
    })
    .catch(err=>{
      console.log(err); 
    })
  }
  const page=(val:any)=>{
      if(val=="a")
      {     
        state.value.pageIndex=1;
      }
     else if(val=="b")
      {
        state.value.pageIndex=PageCount.value;
      }
     else if(val=="c")
      {
        
        state.value.pageIndex--;
      }
     else if(val=="d")
      {
        if(state.value.pageIndex==PageCount.value)
        {
          alert('已经是最后一页了');
          return;
        }
        state.value.pageIndex++;
      }
      else if(val=="e")
      {
        if(tiao.value<1||tiao.value>PageCount.value)
        {
          alert('页码只能在1和'+PageCount.value+'之间');
          return;
        }
        state.value.pageIndex=tiao.value;
      }
      show();
  }
  const buy=(id:any)=>{
    router.push({
        path:'/userFinance',
        query:{
          id:id
        }
    })
  }
    </script>
    
    
    
    <style scoped>
    
    </style>
    